<template>
  <div class="student">
    <div class="head">
      <div class="head-left">班级管理</div>
      <!-- 搜索 -->
      <el-form :model="formlist">
        <div class="head-right">
          <el-button icon="el-icon-delete">删除</el-button>
          <el-button icon="el-icon-folder-add" @click="dialogFormVisible = true"
            >添加班级
          </el-button>
          <div class="form">
            <el-select
              class="sel"
              v-model="formname.courseid"
              placeholder="请选择课程"
              @change="classlist"
              clearable
            >
              <el-option
                v-for="item in course"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                clearable
              ></el-option>
            </el-select>
            <el-input
              class="imput"
              placeholder="请填写学员姓名"
              v-model="formname.name"
              @blur="classlist"
              clearable
            ></el-input>
            <!-- <el-button type="primary" @click="classlist">主要按钮</el-button> -->
          </div>
        </div>
      </el-form>
    </div>
    <!-- 添加 -->
    <el-dialog title="添加班级" v-model="dialogFormVisible">
      <el-form :model="formlist" :rules="rules" ref="formlist">
        <el-form-item label="所选课程" prop="courseid">
          <el-select
            v-model="formlist.courseid"
            placeholder="请选择课程"
            clearable
          >
            <el-option
              v-for="item in course"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="formlist.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划课时" prop="coursecounts">
          <el-input
            v-model="formlist.coursecounts"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="开班日期" required>
          <el-col :span="11">
            <el-form-item prop="startdate">
              <el-date-picker
                type="date"
                placeholder="选择开班日期"
                v-model="formlist.startdate"
                format="YYYY-MM-DD"
                value-format="YYYY/MM/DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="结班日期" required>
          <el-col :span="11">
            <el-form-item prop="enddate">
              <el-date-picker
                type="date"
                placeholder="选择结班日期"
                v-model="formlist.enddate"
                format="YYYY-MM-DD"
                value-format="YYYY/MM/DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm('formname')">重置</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              formadd('formlist');
            "
            style="color: #fff"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改班级" v-model="dialogFormUpdate">
      <el-form :model="formlist" ref="formadd">
        <el-form-item label="所选课程">
          <el-select v-model="formlist.courseid" placeholder="请选择课程">
            <el-option
              v-for="item in course"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="formlist.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划课时">
          <el-input
            v-model="formlist.coursecounts"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="开班日期" required>
          <el-col :span="11">
            <el-form-item prop="startdate">
              <el-date-picker
                type="date"
                placeholder="选择开班日期"
                v-model="formlist.startdate"
                format="YYYY-MM-DD"
                value-format="YYYY/MM/DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="结班日期" required>
          <el-col :span="11">
            <el-form-item prop="enddate">
              <el-date-picker
                type="date"
                placeholder="选择结班日期"
                v-model="formlist.enddate"
                format="YYYY-MM-DD"
                value-format="YYYY/MM/DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              formupdate('formadd');
            "
            style="color: #fff"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 列表 -->
    <div class="main">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="班级名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="coursename"
          label="课程"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="teacher"
          width="180"
          label="老师"
        ></el-table-column>
        <el-table-column prop="schcourses" width="180" label="人数">
        </el-table-column>
        <el-table-column
          prop="enddate"
          width="180"
          label="计划课时"
        ></el-table-column>
        <el-table-column
          prop="startdate"
          width="180"
          label="已排课时"
        ></el-table-column>
        <el-table-column
          prop="students"
          width="180"
          label="已上课时"
        ></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template #default="scope">
            <el-button type="text" @click="dialogFormCourse = true"
              >排课</el-button
            >
            <el-button
              type="text"
              @click="
                dialogFormUpdate = true;
                edit(scope.row.id);
              "
              >修改</el-button
            >
            <el-button
              type="text"
              @click="
                dialogFormclass = true;
                schedule(scope.row);
              "
              >课表</el-button
            >
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="formname.psize"
        :current-page="formname.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 排课 -->
      <el-dialog title="排课" width="60%" v-model="dialogFormCourse">
        <el-form :model="formCourse">
          <div class="app">
            <div class="app-head" style="text-align: left">
              <el-form-item label="主讲老师" class="head-text" size="small">
                <el-select
                  v-model="formCourse.region"
                  placeholder="请选择主讲老师"
                  @click="teacherslist((cat = 1))"
                >
                  <el-option
                    v-for="item in teachersData"
                    :key="item.id"
                    :label="item.teacherid"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-button type="text" @click="teach">添加助教老师</el-button>
            <div class="app-head">
              <el-form-item
                label="助教老师"
                class="head-text"
                size="small"
                v-show="teaching"
              >
                <el-select
                  @click="teacherslist"
                  v-model="formCourse.region"
                  placeholder="请选择助教老师"
                >
                  <el-option
                    v-for="item in helpteacherData"
                    :key="item.id"
                    :label="item.assistant"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="app-head">
              <el-form-item label="教室" class="head-text" size="small">
                <el-select v-model="formCourse.region" placeholder="请选择教室">
                  <el-option
                    v-for="item in classroomData"
                    :key="item.id"
                    :label="item.classrooms"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="app-head">
              <el-form-item
                label="单节课扣学员课时"
                class="head-text"
                size="small"
              >
                <el-input
                  v-model="formCourse.pricecounts"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="bottom">
            <el-tabs style="height: 200px">
              <el-tab-pane label="单次排课" style="float: left" @click="one">
                <div class="bottom-top" style="margin-top: 20px">
                  <div
                    class="bottom-text"
                    style="margin-bottom: 10px; text-align: left"
                  >
                    开课日期
                  </div>
                  <el-time-select
                    v-model="value"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    placeholder="选择时间"
                    style="float: left"
                  >
                  </el-time-select>
                </div>
                <div
                  class="bottom-footer"
                  style="margin-top: 20px; float: left"
                >
                  <div
                    class="bottom-text"
                    style="margin-bottom: 10px; text-align: left"
                  >
                    上课时间
                  </div>
                  <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                  >
                  </el-time-select>
                  <span> - </span>
                  <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    :minTime="startTime"
                  >
                  </el-time-select>
                  <el-button
                    icon="el-icon-plus"
                    style="
                      width: 38px;
                      height: 32px;
                      margin-left: 8px;
                      padding: 0;
                    "
                  ></el-button>
                </div>
                <div class="bottom-student">
                  <div class="box" style="float: left; display: flex">
                    <h3>选择学员(0)</h3>
                    <span
                      class="createUser"
                      style="
                        padding-top: 25px;
                        margin-left: 30px;
                        color: #4181fc;
                        cursor: pointer;
                      "
                      @click="innerVisible = true"
                      ><span style="color: #ddd" class="el-icon-user"></span
                      >添加学员</span
                    >
                    <div class="user"></div>
                  </div>
                </div>
                <el-dialog
                  width="50%"
                  title="选择学员"
                  v-model="innerVisible"
                  append-to-body
                >
                  <el-transfer
                    v-model="value1"
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入城市拼音"
                    :data="data"
                  />
                </el-dialog>
              </el-tab-pane>
              <el-tab-pane label="批量排课">
                <div
                  class="bottom-top"
                  style="margin-top: 20px; margin-right: 20px"
                >
                  <div
                    class="bottom-text"
                    style="margin-bottom: 10px; text-align: left"
                  >
                    开课日期
                  </div>
                  <el-time-select
                    v-model="value"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    placeholder="选择时间"
                    style="float: left"
                  >
                  </el-time-select>
                  <div class="bottom-top-left" style="display: flex">
                    <div
                      class="top-left"
                      style="margin-left: 30px; margin-right: 30px"
                    >
                      <div style="text-align: left">结束方式</div>
                      <el-radio v-model="radio" label="1">按课节</el-radio>
                      <el-radio v-model="radio" label="2">按日期</el-radio>
                    </div>
                    <div class="top-right">
                      <div style="text-align: left">排课总数</div>
                      <el-input
                        placeholder="请输入内容"
                        style="width: 150px; height: 30px"
                        v-model="input"
                        clearable
                      >
                      </el-input>
                    </div>
                  </div>
                </div>
                <div
                  class="bottom-footer"
                  style="margin-top: 20px; float: left"
                >
                  <div
                    class="bottom-text"
                    style="margin-bottom: 10px; text-align: left"
                  >
                    上课时间
                  </div>
                  <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                  >
                  </el-time-select>
                  <span> - </span>
                  <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    start="08:30"
                    step="00:15"
                    end="18:30"
                    :minTime="startTime"
                  >
                  </el-time-select>
                  <el-button
                    icon="el-icon-plus"
                    style="
                      width: 38px;
                      height: 32px;
                      margin-left: 8px;
                      padding: 0;
                    "
                  ></el-button>
                </div>
                <div class="bottom-student">
                  <div
                    class="box"
                    style="float: left; display: block; clear: left"
                  >
                    <h3 style="display: inline-block; margin-right: 35px">
                      选择学员(0)
                    </h3>
                    <span
                      class="createUser"
                      style="
                        padding-top: 25px;
                        margin-left: 30px;
                        color: #4181fc;
                        cursor: pointer;
                      "
                      @click="innerVisible = true"
                      ><span style="color: #ddd" class="el-icon-user"></span
                      >添加学员</span
                    >
                    <div class="user"></div>
                  </div>
                </div>
                <el-dialog
                  width="50%"
                  title="选择学员"
                  v-model="innerVisible"
                  append-to-body
                >
                  <el-transfer
                    v-model="value1"
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入城市拼音"
                    :data="data"
                  />
                </el-dialog>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              type="primary"
              @click="
                dialogFormVisible = false;
                formcourse();
              "
              >保存</el-button
            >
          </span>
        </template>
      </el-dialog>
      <!-- 课表 -->
      <el-dialog title="课表" width="90%" v-model="dialogFormclass">
        <section class="el-container">
          <aside class="el-aside left-aside" style="width: 300px">
            <div class="left-aside-row">
              <div class="left-aside-header" style="text-align: left">
                {{ kebiaolist.name }}
              </div>
              <div class="left-aside-connect">
                <div class="list">
                  <ul style="padding: 0">
                    <li>
                      课程：<b>{{ kebiaolist.coursename }}</b>
                    </li>
                    <li>老师：<b>暂无</b></li>
                    <li>
                      人数：<b>{{ kebiaolist.schcourses }}/30</b>
                    </li>
                  </ul>
                </div>
                <div class="schedule">
                  <div
                    role="progressbar"
                    aria-valuenow="0"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    class="
                      el-progress el-progress--line el-progress--without-text
                    "
                  >
                    <div class="el-progress-bar">
                      <div class="el-progress-bar__outer" style="height: 6px">
                        <div
                          class="el-progress-bar__inner"
                          style="width: 0%; background-color: rgb(27, 214, 123)"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="state"
                    style="display: flex; justify-content: space-between"
                  >
                    <span>已上0节课</span><span>已排0节课</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="left-aside-row">
              <div
                class="left-aside-row-2-header"
                style="display: flex; justify-content: space-between"
              >
                班级学员（0）
                <span
                  class="el-icon-user"
                  style="color: #1890ff; cursor: pointer"
                ></span>
              </div>
              <div class="left-aside-row-2-connect"></div>
              <div style="clear: both"></div>
            </div>
          </aside>
          <main class="el-main">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="单次排课" name="second">
                <el-calendar v-model="value"> </el-calendar>
              </el-tab-pane>
              <el-tab-pane label="批量排课" name="first">批量排课</el-tab-pane>
            </el-tabs>
          </main>
        </section>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    const generateData = (_) => {
      const data = [];
      const cities = ["上海", "北京", "广州", "深圳", "南京", "西安", "成都"];
      const spell = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "nanjing",
        "xian",
        "chengdu",
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          spell: spell[index],
        });
      });
      return data;
    };
    return {
      value: new Date(),
      activeName: "second",
      data: generateData(),
      value1: [],
      filterMethod(query, item) {
        return item.spell.indexOf(query) > -1;
      },
      formname: {
        id: "",
        name: "",
        courseid: "",
        psize: 5,
        page: 1,
      },
      tableData: [
        {
          name: "",
          coursename: "",
          startdate: "",
          schcourses: "",
          enddate: "",
          status: "",
          students: "",
        },
      ],
      kebiaolist: [],
      course: [], //班级数据
      teachersData: [], //主讲老师列表
      helpteacherData: [], //助教列表
      classroomData: [], //教室列表
      stadent: [],
      startTime: "",
      // input: ref(''),
      endTime: "",
      radio: "1",
      value: "",
      dialogFormVisible: false,
      dialogFormCourse: false,
      innerVisible: false,
      teaching: false,
      dialogFormUpdate: false,
      dialogFormclass: false,
      formlist: {
        id: "",
        name: "", //班级名称
        coursename: "", // 课程名称
        startdate: "", // 开班日期
        enddate: "", // 结班日期
        coursecounts: "", // 计划课时
        courseid: "", //所选课程
      },
      formCourse: {
        addtype: "",
        studentid: "",
        classid: "",
        courseid: "",
        teacherid: "",
        assistant: "",
        classrooms: "",
        pricecounts: "",
        begindate: "",
        jsfs: "",
        coursescount: "",
        studentlist: [
          {
            addtime: "",
            age: "",
            birthday: "",
            buycourses: "",
            classesList: "",
            classid: "",
            classids: "",
            companyid: "",
            coursechecked: "",
            coursecheckedName: "",
            courseslist: "",
            coursetableId: "",
            firstPingYin: "",
            id: "",
            lavecourses: "",
            name: "",
            num: "",
            oncourses: "",
            orderList: "",
            photo: "",
            remarks: "",
            selected: "",
            sex: "",
            state: "",
            stateName: "",
            tel: "",
            wechat: "",
            yiPaicourses: "",
            yiShangcourses: "",
          },
        ],
        weektime: [
          {
            week: "",
            begintime: "",
            endtime: "",
          },
        ],
      },
      rules: {
        name: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        courseid: [
          { required: true, message: "请选择课程", trigger: "change" },
        ],
        startdate: [
          {
            type: "date",
            required: true,
            message: "请选择开班日期",
            trigger: "change",
          },
        ],
        enddate: [
          {
            type: "date",
            required: true,
            message: "请选择结班日期",
            trigger: "change",
          },
        ],
        coursecounts: [
          { required: true, message: "请填写计划课时", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.courselist(); //课程列表
    this.classlist(); //班级列表
    this.teacherslist(); //讲师列表
    this.helpteacherlist(); //助教列表
    this.classroomlist(); //教室列表
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 课程列表数据
    async courselist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list"
      );
      // console.log(res);
      this.course = res.data.list;
      // console.log(this.course);
    },
    // 学生列表数据
    async statuslist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/list"
      );
      // console.log(res);
      this.stadent = res.data.list;
      // console.log(this.stadent);
    },
    // 讲师列表
    async teacherslist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/list?cat=1"
      );
      console.log(res);
      this.teachersData = res.data.list;
      console.log(this.teachersData);
    },
    // 助教列表
    async helpteacherlist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/list?cat=2"
      );
      console.log(res);
      this.helpteacherData = res.data.list;
      console.log(this.helpteacherData);
    },
    // 教室列表
    async classroomlist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classrooms/list"
      );
      this.classroomData = res.data.list;
      console.log(this.classroomData);
    },
    // 显示添加助教
    teach() {
      this.teaching = !this.teaching;
    },
    // 班级列表数据
    async classlist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/classes/listShowTeach",
        {
          params: this.formname,
        }
      );
      this.tableData = res.data.list;
      this.total = res.data.counts;
      this.dialogFormUpdate = false;
      this.dialogFormVisible = false;
      this.dialogFormCourse = false;
      this.dialogFormclass = false;
      // console.log(res);
    },
    //每页显示条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.formname.psize = val;
      this.classlist();
    },
    //当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formname.page = val;
      this.classlist();
    },
    //  班级添加
    // async formadd(formlist) {
    //   console.log(formlist);
    //   this.$refs[formlist].validate((res) => {
    //     if (!res) return;
    //   });
    //   const token = window.sessionStorage.getItem("access_token");
    //   const { data: res } = await this.$http.post(
    //     "http://www.eshareedu.cn/edusystems/api/classes/add",
    //     {
    //       params: this.formlist,
    //     },
    //     {
    //       headers: {
    //         token,
    //       },
    //     }
    //   );
    //   if (res.errCode == "10000") {
    //     this.$message.success("添加成功");
    //   } else {
    //     this.$message.error("添加失败");
    //   }
    //   this.classlist();
    // },
    // // 重置方法
    // resetForm(formlist) {
    //   this.$refs[formlist].resetFields();
    // },
    async formadd() {
      const token = window.sessionStorage.getItem("access_token");
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/classes/add",
        {
          params: this.formlist,
        },
        {
          headers: {
            token,
          },
        }
      );
      // console.log(this.formlist);
      // console.log(res);
      if (res.errCode == "10000") {
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
      this.classlist();
    },
    // 删除方法
    async del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.get(
            "http://www.eshareedu.cn/edusystems/api/classes/delete",
            {
              params: {
                id: id,
              },
            }
          );
          console.log(res);
          if (res.errCode == 10000) {
            this.$message.success("删除成功!");
          } else {
            this.$message.error("删除失败");
          }
          this.classlist();
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 修改方法
    edit(id) {
      this.formlist.id = id;
      this.tableData.forEach((item) => {
        console.log(item);
        if (id == item.id) {
          this.formlist.name = item.name;
          this.formlist.coursename = item.name;
          this.formlist.startdate = item.startdate;
          this.formlist.enddate = item.enddate;
          this.formlist.coursecounts = item.coursecounts;
          this.formlist.courseid = item.courseid;
        }
      });
    },
    // 执行修改
    async formupdate() {
      const token = window.sessionStorage.getItem("access_token");
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/classes/add",
        {
          params: this.formlist,
        },
        {
          headers: {
            token,
          },
        }
      );
      console.log(this.formlist);
      // console.log(res);
      if (res.errCode == "10000") {
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.classlist();
    },
    // 课表
    async schedule(row) {
      //  console.log(row)
      this.kebiaolist = row;
      console.log(this.kebiaolist);
    },
    // 排课
    async formcourse() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/ coursetables/add",
        {
          params: this.formCourse,
        }
      );
      console.log(res);
    },
    // 单次排课
    one() {
      this.formCourse.addtype = one;
      console.log(this.formCourse.addtype);
    },
  },
};
</script>

<style lang="scss">
.student {
  margin-left: 2%;
  background-color: #fff;
}

.head {
  height: 46px;
  display: flex;
}

.head .head-left {
  width: 90px;
  line-height: 46px;
  text-align: left;
}

.head .head-right {
  width: 100%;
  background-color: #f1f2f6;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 20px;
}

.el-button {
  font-size: 12px;
  height: 30px;
}

.form {
  width: 365px;
  height: 30px;
  display: flex;
  align-items: center;
}

.sel,
.imput {
  margin-left: 10px;
  width: 50%;
}

.main {
  width: 100%;
  margin-top: 10px;
}

.main .tab {
  background-color: #f5f6fa;
}

.main .span-name {
  margin-left: 5px;
  line-height: 65px;
}

.main .app {
  display: flex;
}

.main .app .bottom .bottom-student .box {
  padding-top: 25px;
  margin-left: 30px;
}

.main .app .bottom .bottom-student .box h3 {
  display: inline-block;
  margin-right: 35px;
}

.el-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}

.el-container .left-aside {
  display: inline-block;
  width: 400px;
  margin-left: 0;
  margin-right: 0;
  width: 300px;
}

.el-container .left-aside .left-aside-row {
  margin-bottom: 20px;
  background-color: #fff;
}

.el-container .left-aside .left-aside-row .left-aside-header {
  background-color: #1890ff;
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.el-container .left-aside .left-aside-row .left-aside-connect {
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 15px;
}

li,
ul {
  list-style: none;
}

.el-container .left-aside .left-aside-row .left-aside-connect .list ul li {
  margin-bottom: 13px;
  text-align: left;
}

.el-container .left-aside .left-aside-row .left-aside-connect .schedule .state,
.el-container .left-aside .left-aside-row .left-aside-connect .schedule {
  margin-top: 20px;
}

.el-container .left-aside .left-aside-row .left-aside-row-2-header {
  padding-top: 15px;
  padding-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-bottom: 2px solid #e5e5e5;
}

.el-form-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  text-align: left;
}

.app .app-head .el-form-item .el-form-item__label {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: right;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
}
.el-form-item__label {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: right;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
}
.el-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: auto;
}
</style>
